<!-- 这里可以写成websocket试时通讯，当用户的状态变成in_match 时候我们可以推送消息过来，为了简答我就用方法er ，下拉刷新 ，查询当前匹配多少人 -->

<template>
	<view>
		<view>
			<!-- 自定义导航 -->
			<!--自定义返回的路径:custom-back="gotabpolice" -->
			<u-navbar title-color="#fff" back-icon-color="#fff" :is-fixed="isFixed" :is-back="true"
				:bgColor="background" :title="title" :back-icon-name="backIconName" :back-text="backText"
				:custom-back="gotabpolice" @leftClick="goback()">
				<view class="navbar-right" slot="right" v-if="slotRight" @click="gotabpolice()">
					<view style="margin:5px 12px 0 0 ">
						<u-icon name="setting" color="#2979ff" size="28"></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="ceshi_header">
			<template>
				<u-avatar :text="userinfo.username" fontSize="15" color="#ffffff" size="120rpx"></u-avatar>
			</template>
		</view>

		<view>
			<u-grid :border="false" @click="click" align="center">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="40"></u-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="success_end">
			<view class="u-demo-block__content" @click="tapss()">
				<u-button size="large" type="success" color="#D87093">{{flag?"取消匹配":"开始匹配"}} </u-button>
			</view>
		</view>

		<view class="success_endss">
			<view class="">
				匹配时间： {{ count }}
			</view>
			<view class="">
				当前在线匹配用户:{{num}}
			</view>
		</view>



		<Share ref="refShare" :descritp="descritp" :newList="newList">
		</Share>






		<!-- 	<button type="default" @click="playgames()">游戏开始</button>


		<button type="default" @click="endGames()">游戏结束</button> -->

		<u-toast ref="uToast" />


	</view>
</template>

<script>
	
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				connected: false,
				connecting: false,
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				baseList: [{
						name: 'plus',
						title: '邀请好友'
					},
					{
						name: 'heart',
						title: '随机匹配'
					}
				],
				
						descritp:'规则说明',
						newList:[
							{
								title:'比赛规则',
								content:[
									'答对+5分，打错不减分，优先得分20分取得胜利',
									'答题时间为5分钟，时间内没有得到20分则全部失败'
									
								]
								
							},
							{
								title:'温馨提示',
								content:[
									'本数据为测试数据，题目不保证真实性',
									'如果退出答题，则无法从新加载数据'	
								]
							}
						],
						
				
				flag: false,
				count: '',
				num: 0,
				// 自定义导航栏
				title: '匹配说明',
				slotRight: true,
				backText: '',
				backIconName: 'nav-back',
				right: false,
				showAction: false,
				rightSlot: false,
				useSlot: false,

				background: '#2E95FF',

				isBack: true,
				search: false,
				custom: false,
				isFixed: true,
				keyword: '',
				// #ifdef MP
				slotRight: false,
				// #endif
				// #ifndef MP
				slotRight: true,
				// #endif
				//自定义导航栏结束

			}
		},

		computed: {
			getMessgae() {
				return this.$store.state.websocketData;
			},
			...mapState(['userinfo'])
		},
		watch: {
			getMessgae(newData, oldData) {

				if (newData.chatMessage.type = "MATCH_USER") {
					
					this.flag = !this.flag
					clearInterval(this.timer)
					this.timer = null
					this.count = 0
					uni.navigateTo({
						url: './match/match?data=' + encodeURIComponent(JSON.stringify(newData.chatMessage
							.data))
					})
				}
			}
		},
		
		methods: {
			gotabpolice() {
				this.$refs.refShare.handleShowShare()
			},
			goback() {
				uni.showModal({
					
					content: '确定离开双人对战',
					success: (res) => {
						if (res.confirm) {
							uni.switchTab({
								url:'../../bottom-nav/index/index'
							})
						} else if (res.cancel) {

						}
					}
				});
				console.log("aa");
			},
			connect() {
				this.$store.dispatch('websocketInit', this.web + '/' + this.userinfo.id)
				this.init()
			},
			init() {
				this.$u.http.get("/app/paper/waiting").then(res => {
					console.log(res.data);
					res.data.forEach(item => {
						if (item == "IN_MATCH") {
							this.num++
						}
					})
					console.log(this.num);
				})
			},
			click(name) {
				if (name == 0) {
					uni.showToast({
						title: '忙不过来了',
						duration: 2000
					});

				}
				if (name == 1) {
					this.ranking()
					this.flag = !this.flag

					if (!this.timer) {
						this.timer = setInterval(() => {
							this.count++
						}, 1000)
					}
				}
			},

			tapss() {
				if (this.flag == true) {
					this.flag = !this.flag
					clearInterval(this.timer)
					this.timer = null
					this.count = 0
					var chatMessage = {};
					var sender = this.userinfo.id;
					var type = "CANCEL_MATCH";
					chatMessage.sender = sender;
					chatMessage.type = type;
					console.log("用户:" + sender + "取消匹配......");
					this.sendMessgae(chatMessage)

				} else {
					this.ranking()
					this.flag = !this.flag

					if (!this.timer) {
						this.timer = setInterval(() => {
							this.count++
						}, 1000)
					}
				}
			},


			send() {
				var chatMessage = {};
				var sender = this.userinfo.id;
				var type = "ADD_USER";
				chatMessage.sender = sender;
				chatMessage.type = type;
				console.log("用户:" + sender + "开始加入......");
				this.sendMessgae(chatMessage)
			},
			playgames() {
				var chatMessage = {};
				var sender = this.userinfo.id;
				var data = this.userinfo.id;
				var type = "PLAY_GAME";
				chatMessage.sender = sender;
				chatMessage.data = data;
				chatMessage.type = type;
				console.log("用户:" + sender + "更新分数为" + data);
				this.sendMessgae(chatMessage)
			},

			endGames() {
				var chatMessage = {};
				var sender = this.userinfo.id;
				var type = "GAME_OVER";
				chatMessage.sender = sender;
				chatMessage.type = type;
				console.log("用户:" + sender + "结束游戏");
				this.sendMessgae(chatMessage)
			},
			ranking() {
				var chatMessage = {};
				var sender = this.userinfo.id;
				var type = "MATCH_USER";
				chatMessage.sender = sender;
				chatMessage.type = type;
				console.log("用户:" + sender + "开始匹配......");
				this.sendMessgae(chatMessage)

			},
			sendMessgae(chatMessage) {
				this.$store.dispatch('websocketSend', chatMessage)
			},


			/*调用关闭方法*/
			close() {
				uni.closeSocket()
			}
		},
		onLoad() {
			this.connect();
			uni.getNetworkType({
				success: function(res) {
					console.log(res.networkType);
				}
			});

		},

		onPullDownRefresh() {
			this.init()
			uni.stopPullDownRefresh();

		},

		/*页面卸载关闭websocket*/
		onUnload() {
			uni.closeSocket()
			uni.hideLoading()
		},
	}
</script>

<style lang="scss" scoped>
	.ceshi_header {
		width: 100%;
		margin: 20rpx 45%;
	}

	.u-popup-slot {
		width: 200px;
		height: 150px;
		display:  flex;
		justify-content: center;
		align-items: center;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.success_end {
		padding: 30px;
	}

	.u-demo-block__content {

		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
	}

	.success_endss {
		margin: 0 auto;
		text-align: center;
	}
</style>
